<template>
  <el-dialog title="流水记录" :visible.sync="dialogVisible" width="1000px">
    <el-table :data="tableData" border>
      <el-table-column label="信息">
        <template slot-scope="scope">
          <span v-if="scope.row.pay_type == 1">
            <!-- 预授权扣款 -->
            {{ scope.row.status == 1 ? '用户通过芝麻信用租代扣成功交租第' + scope.row.which_period + '期'+scope.row.rent+'元':'第'+scope.row.which_period+'期代扣失败 ' +scope.row.rent+'元 - 用户银行卡余额不足' }}
          </span>
          <span v-if="scope.row.pay_type == 2">
            <!-- 主动支付 -->
            流水号{{ scope.row.out_trade_no }}（第{{ scope.row.which_period }}期）{{ scope.row.status == 1 ? '付款' + scope.row.rent + '元给商家' : '付款' + scope.row.rent + '元给商家失败' }}
          </span>
          <span v-if="scope.row.pay_type == 3">
            <!-- 花呗 -->
            用户通过支付宝花呗成功交租{{ scope.row.which_period }}期 {{ scope.row.rent }}元
          </span>
          <span v-if="scope.row.pay_type == 4">
            <!-- 手动扣款 -->
            用户通过支付宝小程序{{ scope.row.status == 1 ? '成功交租第' + scope.row.which_period + '期'+scope.row.rent+'元':'交租第'+scope.row.which_period+'期 '+scope.row.rent+'元失败' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作人员" prop="username" width="200" />
      <el-table-column label="时间" prop="create_time" width="200" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLeaseFlow } from '@/api/order'
export default {
  // props: ['orderNo'],
  props: {
    orderNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: []
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        getLeaseFlow(this.orderNo).then(res => {
          this.tableData = res || []
        })
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
</style>
